import React from 'react';
import { Breadcrumb, Icon, message, Table, Button, Modal, Input } from 'antd';
import './activity.less';
import $ from 'jquery';
import Config from '../../common/config';

const config = new Config();
const token = sessionStorage.getItem('token');

export default class Activity extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            collapsed: false, //菜单折叠状态
            mode: 'inline', //菜单显示模式，垂直 or 行内
            blockList: [],
            visible: false,
            blockName: "",
            link: "",
            id: 0,
        }
    }
    componentDidMount() {
        this.getBlockList();
    }
    //获取专区列表
    getBlockList() {
        $.ajax({
            url: `${config.JuseHomepage}/block/list`,
            type: "get",
            async: true,
            headers: {
                'Authorization': 'Bearer ' + token,
            },
            success: res => {
                if (res.code === 200) {
                    const blockList = res.data;
                    if (blockList.length > 0) {
                        blockList.forEach((ele, i) => {
                            ele.index = i + 1;
                        });
                        this.setState({
                            blockList
                        });
                    } else {
                        this.setState({
                            blockList
                        });
                    }
                }
            }
        });
    }
    //新增/编辑专区
    addBlock(record) {
        if (record) {
            this.setState({
                visible: true,
                blockName: record.blockName,
                link: record.link,
                id: record.id,
            });
        } else {
            if (this.state.blockList.length >= 6) {
                message.error(`专区版块最多只能添加6个，请返回重新操作`, 2);
            } else {
                this.setState({
                    visible: true
                });
            }
        }
    }
    //确定
    handleOk() {
        const { id, blockName, link } = this.state;
        if (!blockName) {
            message.error(`请填写专区名称！`, 2);
            return;
        }
        if (blockName.length > 6) {
            message.error(`专区名称不得超过6个字符，请重新填写！`, 2);
            return;
        }
        if (!link) {
            message.error(`请填写专区的链接地址！`, 2);
            return;
        }
        let data = {
            blockName, link
        }
        let url;
        if (id) {
            data.id = id;
            url = `${config.JuseHomepage}/block/update`;
        } else {
            url = `${config.JuseHomepage}/block/add`
        }
        $.ajax({
            url, data,
            type: "post",
            async: true,
            headers: {
                'Authorization': 'Bearer ' + token,
            },
            success: res => {
                if (res.code === 200) {
                    this.getBlockList();
                    this.handleCancel();
                } else {
                    message.error(res.mes)
                }
            }
        });
    }
    //取消，关闭对话框
    handleCancel() {
        this.setState({
            visible: false,
            blockName: "",
            link: "",
            id: 0
        });
    }
    //输入专区名称
    inputBlockname(e) {
        this.setState({
            blockName: e.target.value,
        });
    }
    //输入链接地址
    inputLink(e) {
        this.setState({
            link: e.target.value,
        });
    }
    //删除专区
    deleteBlock(id) {
        Modal.confirm({
            title: '删除',
            content: '温馨提示：删除后不可恢复，是否继续删除？',
            onOk: () => {
                $.ajax({
                    url: `${config.JuseHomepage}/block/delete`,
                    type: "post",
                    async: true,
                    data: { id },
                    headers: {
                        'Authorization': 'Bearer ' + token,
                    },
                    success: res => {
                        if (res.code === 200) {
                            this.getBlockList();
                        }
                    }
                });
            }
        });
    }
    render() {
        const columns = [{
            title: '序号',
            dataIndex: 'index',
            width: 50,
        }, {
            title: '专区名称',
            dataIndex: 'blockName',
            width: 150,
        }, {
            title: '链接地址',
            dataIndex: 'link',
            width: 200,
        }, {
            title: '操作',
            key: 'edit',
            width: 50,
            render: (text, record) => (
                <span>
                    <a href="javascript:void(0);" onClick={() => this.addBlock(record)}>编辑</a>
                </span>
            )
        }, {
            title: '操作',
            key: 'delete',
            width: 50,
            render: (text, record) => (
                <span>
                    <a href="javascript:void(0);" onClick={() => this.deleteBlock(record.id)}>删除</a>
                </span>
            )
        }];
        return (
            <div className='goods-label'>
                <div className='goods-label-cont clearfix'>
                    <div className='goods-label-cont-nav clearfix'>
                        <Breadcrumb separator=">">
                            <Breadcrumb.Item>首页管理</Breadcrumb.Item>
                            <Breadcrumb.Item>专区版块</Breadcrumb.Item>
                        </Breadcrumb>
                    </div>
                    <div className='allgoods-table clearfix'>
                        <Table
                            rowKey="id"
                            columns={columns}
                            dataSource={this.state.blockList}
                            pagination={false}
                            bordered
                        />
                        <div className='goods-label-tabletr'>
                            <Button className='goods-label-table-app' width={160} icon="plus" onClick={() => this.addBlock()}>新增</Button>
                            <Modal
                                title="新增"
                                visible={this.state.visible}
                                onOk={() => this.handleOk()}
                                onCancel={() => this.handleCancel()}
                                maskClosable={false}
                            >
                                <div className="block-title">
                                    专区名称 &nbsp;&nbsp;<Input type="text" placeholder="请输入专区名称，不超过6个字符" value={this.state.blockName} onChange={(e) => this.inputBlockname(e)} style={{ width: "75%" }} />
                                    <i style={{ color: "#ff0000" }}> *</i>
                                </div>
                                <div className="block-title">
                                    链接地址 &nbsp;&nbsp;<Input type="text" placeholder="请输入专区链接地址" value={this.state.link} onChange={(e) => this.inputLink(e)} style={{ width: "75%" }} />
                                    <i style={{ color: "#ff0000" }}> *</i>
                                </div>
                            </Modal>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}